<template>
	<section>
		<el-col :span="16" :offset="4">
			<h1 style="text-align: center;margin: 20px 0;">课程内容</h1>
			<el-collapse v-model="activeNames">
			  <el-collapse-item title="创业基础课程" name="1">
			    <div class="courselink" v-for="el in $store.state.courseInfo.courseStages[0].stageUnits">
			    	{{el.name}}
			    	<el-button type="primary" size="small"  @click="skip('/coursestage',$route.query.id,el.unitId,'1')">进入课程</el-button>
			    </div>
			  </el-collapse-item>
			  <el-collapse-item title="案例分析课程" name="2">
			    <div class="courselink" v-for="el in $store.state.courseInfo.courseStages[1].stageUnits" >
			    	{{el.name}}
			    	<el-button type="primary" size="small" @click="skip('/coursestage',$route.query.id,el.unitId,'2')">进入课程</el-button>			    
			    </div>
			  </el-collapse-item>
			  <el-collapse-item title="沙盘推演课程" name="3">
			    <div class="courselink" >
			    	沙盘推演课程
			    	<el-button type="primary" size="small" @click="skip('/coursestage',$route.query.id,$store.state.courseInfo.courseStages[2].stageId,'3')">进入课程</el-button>			    
			    </div>
			  </el-collapse-item>
			  <el-collapse-item title="项目路演课程" name="4">
			    <div class="courselink">
			    	项目路演
			    	<el-button type="primary" size="small" @click="skip('/coursestage',$route.query.id,$store.state.courseInfo.courseStages[3].stageId,'4')">进入课程</el-button>			    			    	
			    </div>
	
			  </el-collapse-item>
			</el-collapse>				
		</el-col>
	
	</section>
</template>

<script>
	import {courseone} from '../../api/api';
	
	
	 export default {
	 	data(){
	 		return{
	 			activeNames:["1","2","3","4"],
	 			courseStages:[]
	 		}
	 	},
	 	methods:{
		    skip(link,id,unitId,stage){
		        this.$router.push(
		        	{
		        		path:link,
		        		query:{
		        			id:id,
		        			unitId:unitId,
		        			stage:stage
		        		}
		        	}
		        )
		    },	
			getcourseInfo:function(){
				var params=this.$route.query.id;
				var _this=this;
				courseone(params).then((res)=>{			
					_this.courseStages=res.courseStages;
				})			
			}		    
	 	},
		mounted() {
			var _this=this;
		}  	 	
	 }
</script>

<style>
	.courselink{
		cursor: pointer;
		font-size: 16px;
		display: block;
		margin-bottom: 10px;
	}
	.courselink button{
		float: right;
	}
	.courselink:hover{
		color:#20a0ff;
	}
</style>